<template>
  <Dialog
    v-model="dialogVisible"
    width="800px"
    :title="typeIndex === 'add' ? t('system.marketChannel.add') : t('system.marketChannel.edit')"
    :before-close="() => closeDialog(formRef)"
  >
    <el-form :model="form" ref="formRef" :rules="rules as FormRules" label-width="110px">
      <el-form-item :label="t('market.markSocialMediaAccount.channel')" prop="channel_id">
        <el-select
          v-model="form.channel_id"
          :filterable="true"
          :placeholder="t('market.MarketSocialMediaAccountGroup.channelMsg')"
          :clearable="false"
        >
          <el-option
            v-for="item in channelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('market.MarketSocialMediaAccountGroup.name')" prop="name">
        <el-input
          v-model="form.name"
          :placeholder="t('market.MarketSocialMediaAccountGroup.nameMsg')"
        />
      </el-form-item>
      <el-form-item :label="t('system.marketChannel.status')" prop="status">
        <el-select
          v-model="form.status"
          :placeholder="t('system.marketChannel.status')"
          :clearable="false"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('market.MarketSocialMediaAccountGroup.remark')">
        <el-input
          v-model="form.remark"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 15 }"
          clearable
          :placeholder="t('market.MarketSocialMediaAccountGroup.remarkMsg')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button class="m-r-4" @click="closeDialog(formRef)"
        >{{ t('system.parameterConfig.cancel') }}
      </el-button>
      <el-button type="primary" @click="submit(formRef)"
        >{{ t('market.industryNews.save') }}
      </el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { type FormInstance, type FormRules, ElMessage } from 'element-plus'
import { createDataApi, editDataApi, getEnumApi } from '@/api/market/MarketSocialMediaAccountGroup'

const emit = defineEmits(['refresh'])
const { t } = useI18n()

const dialogVisible = ref<boolean>(false)
const typeIndex = ref<string>()

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  name: '',
  channel_id: '',
  status: '',
  remark: ''
})

const channelList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
])

const rules = ref<FormRules>({
  name: [
    {
      required: true,
      message: t('market.MarketSocialMediaAccountGroup.nameMsg'),
      trigger: 'blur'
    }
  ],
  channel_id: [
    {
      required: true,
      message: t('market.MarketSocialMediaAccountGroup.channelMsg'),
      trigger: 'change'
    }
  ],
  status: [
    {
      required: true,
      message: t('market.MarketSocialMediaAccountGroup.statusMsg'),
      trigger: 'change'
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const resp =
        typeIndex.value === 'add'
          ? await createDataApi(form.value)
          : await editDataApi(form.value.id, {
              name: form.value.name,
              channel_id: form.value.channel_id,
              status: form.value.status,
              remark: form.value.remark
            })
      if (resp.code === 0) {
        ElMessage.success(
          typeIndex.value === 'add'
            ? t('system.parameterConfig.createSucMsg')
            : t('system.parameterConfig.editSucMsg')
        )
        closeDialog(formEl)
        emit('refresh')
      }
    }
  })
}

const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.value = {
    name: '',
    channel_id: '',
    status: '',
    remark: ''
  }
  formEl.resetFields()
  dialogVisible.value = false
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'channel' })
  channelList.value = resp.data
}

const getBackShow = (type: string, row?: Record<string, any>) => {
  typeIndex.value = type
  getDropDownBoxInfo()
  if (type === 'edit') form.value = row!
}

defineExpose({
  dialogVisible,
  getBackShow
})
</script>
<style lang="less" scoped></style>
